<script name="CartSku" setup lang="ts">
import useStore from '@/store'
import { CartItem } from '@/types/cart'
import { ApiRes } from '@/types/data'
import { GoodsInfo, Skus } from '@/types/goods'
import { onClickOutside } from '@vueuse/core'
import { onMounted, PropType, ref } from 'vue'
import GoodsSku from '@/views/goods/components/goods-sku.vue'
import request from '@/utils/request'
import Message from '@/components/message'

const {} = useStore()

// 控制具体规格显示和隐藏
const visible = ref(false)
const target = ref(null)
onClickOutside(target, () => {
  visible.value = false
})

// 接收父组件传过来的数据
const props = defineProps({
  cartItem: {
    type: Object as PropType<CartItem>,
    required: true,
  },
})

// 因为要传给goodSku组件goods信息，需要通过skuId获取商品信息
const goods = ref({} as GoodsInfo)
onMounted(async () => {
  const res = await request.get<ApiRes<GoodsInfo>>(
    `/goods/sku/${props.cartItem.skuId}`
  )
  goods.value = res.data.result
})

// 当选择具体规格时，子组件传过来的事件,存下来选择后的skuid
let currentSkuid = ''
const changeSku = (id: string) => {
  currentSkuid = id
}
// 点击确定按钮的时候,判断规格有没有更改且选全,传数据给父组件
const emit = defineEmits<{
  (e: 'change', sku: Skus): void
}>()
const submit = () => {
  if (currentSkuid && currentSkuid !== props.cartItem.skuId) {
    // console.log(goods.value.skus)
    const sku = goods.value.skus.find((item) => item.id === currentSkuid)
    emit('change', sku as Skus)
  } else {
    Message.warning('规格没有更改或没有选择完整的规格')
  }
}
</script>

<template>
  <div class="cart-sku" ref="target">
    <div class="attrs" @click="visible = !visible">
      <span class="ellipsis">{{ cartItem.attrsText }}</span>
      <i class="iconfont icon-angle-down"></i>
    </div>
    <div class="layer" v-if="visible">
      <!-- 传给子组件goods和skuid -->
      <GoodsSku
        :goods="goods"
        :sku-id="cartItem.skuId"
        @changeSku="changeSku"
      ></GoodsSku>
      <XtxButton
        type="primary"
        size="mini"
        style="margin-left: 60px"
        @click="submit"
      >
        确认
      </XtxButton>
    </div>
  </div>
</template>

<style scoped lang="less">
.cart-sku {
  height: 28px;
  border: 1px solid #f5f5f5;
  padding: 0 6px;
  position: relative;
  margin-top: 10px;
  display: inline-block;
  .attrs {
    line-height: 24px;
    display: flex;
    span {
      max-width: 230px;
      font-size: 14px;
      color: #999;
    }
    i {
      margin-left: 5px;
      font-size: 14px;
    }
  }
  .layer {
    position: absolute;
    left: -1px;
    top: 40px;
    z-index: 10;
    width: 400px;
    border: 1px solid @xtxColor;
    box-shadow: 2px 2px 4px lighten(@xtxColor, 50%);
    background: #fff;
    border-radius: 4px;
    font-size: 14px;
    padding: 20px;
    &::before {
      content: '';
      width: 12px;
      height: 12px;
      border-left: 1px solid @xtxColor;
      border-top: 1px solid @xtxColor;
      position: absolute;
      left: 12px;
      top: -8px;
      background: #fff;
      transform: scale(0.8, 1) rotate(45deg);
    }
  }
}
</style>
